body{width: 750px;}
.tab{ display: flex;width: 100%; height: 72px;line-height: 72px;font-size: 28px;}
.tab .tab-item{flex: 1;text-align: center;}
.tab .tab-link{padding-bottom: 12px;color: #A2A5AA;position: relative;}
.tab .active .tab-link{color: #3B424C;}
.tab .active .tab-link:after{display: block;content: ''; width: 26px;height: 6px;border-radius: 30px;background: red;position: absolute;left: 50%;bottom: 0;margin-left: -13px;}

.main-wrapper{position: fixed;top: 76px;left: 0;width: 100%;bottom: 0;background-color: #fff;}

/*slider*/
.slider-wrapper{width: 100%;overflow:hidden;position: relative;box-shadow: 0 3px 5px #666;z-index: 99;}
.slider{min-height: 1px;}
.slider-group{position: relative;overflow: hidden;white-space: nowrap;}
.slider-item{float: left;box-sizing: border-box;overflow: hidden;text-align: center;}
.slider-item a{display: block;width: 100%;overflow:hidden; }
.slider-item img{display: block;width: 100%;}
.dots{position: absolute; left: 28px;bottom: 24px;text-align: center;font-size: 0;}
.dot{display: inline-block;margin: 0 8px;width: 16px;height: 16px;border-radius: 50%;background-color:rgba(255,255,255,0.4);}
.dot.active{background: rgba(255,204,1,0.70);}

/*newsList*/
.news-list{margin: 0 20px 20px;border: 1px solid #EBE7E7;box-shadow: 0 0 4px 0 #D2CFCF;border-radius: 4px;}
.news-item{display: flex;box-sizing: border-box;align-items: center;padding: 24px 16px;border-bottom: 1px solid #ccc;}
.news-item .pic{width: 336px;height: 220px;padding-right: 24px;}
.news-item .pic img{width: 100%;height: 100%;}
.news-info{display: flex;flex-direction: column;flex:1;line-height: 40px;height: 220px; overflow: hidden;font-size: 24px; position: relative;}
.news-info .title{font-size: 28px;margin-bottom: 8px;}
.news-info .desc{font-size: 24px;}
.news-info .news-con{position: absolute;left: 0;right: 0;bottom: 0;font-size: 20px;color: #9B9B9B;display: flex;justify-content:space-between; }
.news-info .news-con .reading{margin-right: 20px;}

.recommend-content{height: 100%;overflow:hidden; }

/*loading*/
.loading-container1{position: absolute;width: 100%;top: 50%;transform: translateY(-50%);}
.loading{width: 100%;text-align: center;}
.loading .desc{line-height: 20px;font-size: 30px;color: #000;}

/*动画*/
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
  opacity: 0
}

.mescroll{position: fixed;top: 372px;bottom: 0;height: auto;padding-top: 44px;}
